<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      border: 0;
    }

    #app {
      height: 300px;
      width: 300px;
      background: #000;
      color: antiquewhite;
      /* margin-bottom: 10px; */
      /* 设置顶边对齐方式之一 */
      /* margin-bottom: -300px; */
    }

    #cla {
      height: 100px;
      width: 250px;
      background: #fcb;
      color: blue;
      margin-top: 30px;
    }
  </style>
</head>

<body>
  <div id="app">
    <h2>
      只会发生在块级元素的垂直方向上
    </h2>
    <strong>父子元素之间</strong>
    <ol>
      <li>绝对定位：父相子绝</li>
      <li>子元素设为行内块元素</li>
      <li>相对定位 top:20px</li>
      <li>浮动</li>
      <li>触发BFC</li>
      <li>设置填充（内边距）</li>
      <li>为父元素添加边框</li>
    </ol>
  </div>
  <div id="cla">
    <strong>相邻元素之间</strong>
    <ul>
      <li>正数&&正数 = 最大的数</li>
      <li>负数&&负数 = 绝对值最大的数</li>
      <li>正数&&负数 = 相加的和</li>
    </ul>
  </div>
</body>

</html>